<template>
  <div>
    <a-modal v-model:visible="visible" :width="600" title="提交优秀案例" :bodyStyle="bodyStyle"  @ok="handleOk">
      <a-form :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <div class="form-item-border" :style="{height: '100%'}">
              <a-form-item label="备注" name="excellent">
                <a-textarea :bordered="false" autoSize v-model:value="formState.excellent" :row="6" placeholder="请输入备注"/>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="closeModel">取消</a-button>
          <a-button key="submit" @click="handleOk" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, getCurrentInstance, ref} from "vue";
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const visible = ref(false);
const isSubmit = ref(false)
const bodyStyle = ref({})
const emit = defineEmits(['saveCase'])
const props = defineProps({
  memId: {
    type: String,
    default: () => {
      return ''
    }
  }
})
const labelCol = ref(
    {
      style: {
        width: '40px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = ref({
  id: props.memId,
  excellent: ''
})
const showModal = () => {
  visible.value = true
  isSubmit.value = false
};
const closeModel = () => {
  visible.value = false
  isSubmit.value = false
}
const handleOk = () => {
  Object.assign(formState.value, {
    id: props.memId
  })
  proxy.$api.postMemorandumExcellent(formState.value).then(res => {
    if (res.resultCode === 0) {
      message.success('提交成功')
      visible.value = false;
      isSubmit.value = true
      emit('saveCase', isSubmit)
    }
  })

};
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.dragger-img {
  margin-top: 40%;
  img {
    width: 114px;
    height: 110px;
  }
}
</style>
